<template>
    <div class="container2">
        <div id="main2"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
    mounted() {
        this.loadPanel()
    },
    data() {
        return {
        }
    },
    props: ['value'],
    methods: {
        loadPanel() {
            var chartDom = document.getElementById('main2');
            var myChart = echarts.init(chartDom);
            let option = {}
            const width = 16
            const pointerWidth = 10
            option = {
                series: [
                    {
                        type: 'gauge',
                        startAngle: 180,
                        endAngle: 0,
                        min: 0,
                        max: 50,
                        splitNumber: 5,
                        radius:'100%',
                        progress: {
                            show: false,
                            roundCap: true,
                            width: width
                        },
                        pointer: {
                            icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
                            length: '100%',
                            width: pointerWidth,
                            offsetCenter: [0, '5%'],
                            itemStyle: {
                            color: '#FF3939'
                            }
                        },
                        center: ['50%', '60%'],
                        axisLine: {
                            roundCap: true,
                            lineStyle: {
                                width: width,
                                color: [
                                    [1,new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                        {
                                        offset: 0.3,
                                        color: "#3279D4"
                                        },
                                        {
                                        offset: 0.6,
                                        color: "#38C9C9"
                                        },
                                        {
                                        offset: 1,
                                        color: "#F95757"
                                        }
                                    ])
                                    ]
                                ],
                            },
                        },
                        axisTick: {
                            splitNumber: 2,
                            lineStyle: {
                                width: 2,
                                color: '#999'
                            }
                        },
                        splitLine: {
                            length: 2,
                            lineStyle: {
                                width: 3,
                                color: '#999'
                            }
                        },
                        axisLabel: {
                            distance: -25,
                            color: '#999',
                            fontSize: 10,
                            show: true,
                        },
                        title: {
                            show: false
                        },
                        detail: {
                            show: false,
                        },
                        data: [
                            {
                            value: this.value
                            }
                        ],
                    }
                ]
            };
            option && myChart.setOption(option);
            myChart.resize({
                width: '160px',
                height: '120px'
            })
        },
    },
    watch: {
        value() {
            this.loadPanel()
        }
    }
   
}
</script>

<style scoped>
.container2 {
    width: 180px; 
    height: 100%;
}
.container2 #main2 {
    height: 100%;
    width: 100%;
}
</style>